<template>
    <nly-content-wrapper class="content-warpper-2" :style="customerId ?{'border':'none'}:{}">
        <div class="content-header-2" :style="customerId?{}:{'height':'0px'}">
            <div class="btn-wrapper clearfix" :style="customerId?{'border':'none','padding-top':'0','height':'52px' }:{}">
                <a-row class="text-center clearfix">
                    <a-col v-if="customerId" style="text-align:left;line-height:52px;">
                        <a-button @click="pageTaskRecord" class="margin-left-10 margin-right-10" type="primary" ghost>
                            <a-icon class="btns-icon" type="file-sync" />刷新
                        </a-button>
                    </a-col>
                    <!-- <a-col v-else :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="pageTaskRecord">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col> -->
                </a-row>
            </div>
        </div>
        <nly-content>
            <condition-box ref="myConditionBox" @callBack="ConditionBoxCallBack" v-if="!customerId"></condition-box>
            <!-- user table列表 -->
            <a-table :scroll="{ x: 1000, y: 500}" :columns="taskRecordColumns" :data-source="taskRecordData"  bordered :pagination="taskRecordPagination" :loading="isLOadingTaskRecord">
                <div slot="callAudioPath" slot-scope="text, record" >
                     <!-- 播放 -->
                    <span v-if="record.callAudioPath" @click="audioTableControl($event,record)" ><a-icon type="play-circle" style="color:green;"/></span>
                    <!-- 暂停 -->
                    <span v-if="record.callAudioPath" @click="audioTableControl($event)" style="margin-left:10px;"><a-icon type="pause-circle" style="color:green;"/></span>
                    <!-- <audio v-if="text" :src="text"  controls="controls" >
                    </audio>  -->
                </div>
                <div slot="callResultFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="taskRecordPostData.callResult" @change="onTaskRecordConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" :value="0">
                        未接通
                        </a-radio>
                        <a-radio :style="radioStyle" :value="1">
                        已接通
                        </a-radio>
                    </a-radio-group>
                </div>
                <div slot="talkTimeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <div>
                        <a-input-number size="small"  v-model="taskRecordPostData.talkTimeStart"  @pressEnter="onTaskRecordConditionChange('taskRecordPostData_talkTimeStart',true,$event)" @blur="onTaskRecordConditionChange('taskRecordPostData_talkTimeStart',true,$event)"/>~
                        <a-input-number size="small"  v-model="taskRecordPostData.talkTimeEnd" :min="taskRecordPostData.talkTimeStart || 0"  @pressEnter="onTaskRecordConditionChange('taskRecordPostData_talkTimeEnd',true,$event)" @blur="onTaskRecordConditionChange('taskRecordPostData_talkTimeEnd',true,$event)"/>
                    </div>
                    <div style="display:flex;margin-top:5px;">
                        <a-button  style="width: 90px;margin-right:8px;" @click="resetTalkTimeCondition">
                        重置
                        </a-button>
                        <a-button  type="primary" style="width: 90px;" @click="onTaskRecordConditionChange">
                        搜索 
                        </a-button>
                    </div>
                </div>
            </a-table>
        </nly-content>  
         <audio ref="voiceTableAudio" src="" controls="controls" preload  hidden></audio>
    </nly-content-wrapper>
</template>

<script>

import getDate from "@/utils/tool/date";
import { mapState } from "vuex";
import { pageList as pageTaskRecord} from "@/api/crm/call/callTaskRecord";
import conditionBox from '@/components/Crm/conditionBox';

export default {
    components: {
        conditionBox
    },
   props: {
        customerId: {
            type: Number,
            default: null
        },
        customer: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        //查询条件
        const conditionData = [
            {
                id: 1,
                sysName:"任务名称",
                name:"任务名称",
                code:"taskName",
                type:"文本",
                val:"",
                dataType: 1,
                onOff: true,
                isSearch:true
            },
            {
                id: 2,
                sysName:"客户名称",
                name:"客户名称",
                code:"crmName",
                type:"文本",
                val:"",
                dataType: 1,
                onOff: true,
                isSearch:true
            },
            {
                id: 3,
                sysName:"联系人姓名",
                name:"联系人姓名",
                code:"linkManName",
                type:"文本",
                val:"",
                dataType: 1,
                onOff: true,
                isSearch:true
            },
            {
                id: 4,
                sysName:"电话号码",
                name:"电话号码",
                code:"phone",
                type:"文本",
                val:"",
                dataType: 1,
                onOff: true,
                isSearch:true
            },
             {
                id: 5,
                sysName:"接通状态",
                name:"接通状态",
                code:"callResult",
                type:"下拉选择",
                val:'[{"key": 0, "title": "未接通"}, {"key": 1, "title": "已接通"}]',
                dataType: 1,
                onOff: true,
                isSearch:true
            },
            
            {
                id: 6,
                sysName:"坐席",
                name:"坐席",
                code:"createUserIds",
                type:"搜索选择",
                val:"officeUser",
                dataType: 1,
                onOff: true,
                isSearch:true
            },
            {
                id: 7,
                sysName:"创建日期",
                name:"创建日期",
                code:"createData",
                type:"时间",
                val:"",
                dataType: 1,
                onOff: true,
                isSearch:true
            },
            
        ]
        //通话记录
        const taskRecordColumns = [
            {
                align: "left",
                title: "姓名",
                dataIndex: "linkManName",
                width: 100
            },
            {
                align: "left",
                title: "性别",
                dataIndex: "gender",
                width: 50,
            },
            {
                align: "center",
                title: "坐席",
                dataIndex: "createUserName",
                width: 100,
            },
            {
                title: "任务名称",
                dataIndex: "crmCallTaskName",
                width: 120,
            },
            {
                title: "被叫号码",
                dataIndex: "callee",
                width: 120,
            },
            {
                align: "left",
                title: "客户名称",
                dataIndex: "crmName",
                width: 200,
               
            },
            {
                align: "center",
                title: "接通状态",
                dataIndex: "callResult",
                width: 70,
                 customRender: (text, row, index) => {
                    return  text === 1 ? <sapn style="color: green">已接通</sapn>: <sapn style="color: red">未接通</sapn> ; 
                },
                scopedSlots: {
                    filterDropdown: 'callResultFilterDropdown',
                    // filterIcon: 'statusFilterIcon',
                },
            },
            {
                align: "center",
                title: "录音",
                dataIndex: "callAudioPath",
                width: 60,
                scopedSlots: { customRender: 'callAudioPath' },
            },
            {
                title: "通话时长(秒)",
                dataIndex: "talkTime",
                width: 100,
                customRender: (text, row, index) => {
                    return this.durationFormat(text,'seconds','mm:ss') || "";
                },
                scopedSlots: {
                    filterDropdown: 'talkTimeFilterDropdown',
                    // filterIcon: 'statusFilterIcon',
                },
                onFilterDropdownVisibleChange: visible => {
                    if (visible) {
                        let talkTimeStart = localStorage.getItem("taskRecordPostData_talkTimeStart");
                        let talkTimeEnd = localStorage.getItem("taskRecordPostData_talkTimeEnd");
                        if(talkTimeStart){
                            this.taskRecordPostData.talkTimeStart = parseInt(talkTimeStart);
                        }
                        if(talkTimeEnd){
                            this.taskRecordPostData.talkTimeEnd = parseInt(talkTimeEnd);
                        }
                        console.log("talkTimeFilterDropdown测试版本");
                    }
                },
            },
            {
                title: "开始时间",
                dataIndex: "startTime",
                width: 150,
            },
            {
                title: "接听时间",
                dataIndex: "answerTime",
                width: 150,
            },
            {
                title: "结束时间",
                dataIndex: "endTime",
                width: 150,
            },
        ]
        return {
            conditionData,
            //通话记录
            taskRecordColumns,
            taskRecordPostData:{
                page:{
                    current: 1,
                    size: 20
                }
            },
            taskRecordPagination:{
                defaultPageSize: 10,
                size: "small",
                current: 1,
                pageSize: 10,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.taskRecordPagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changeTaskRecordPageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    console.log("通话记录翻页：",page,pageSize);
                    // this.postData.current = page;
                    this.taskRecordPagination.current = page;
                    this.taskRecordPagination.pageSize = pageSize;
                    Object.assign(this.taskRecordPostData, {
                        page:{
                            size: pageSize,
                            current: page,
                        }
                    });
                    this.pageTaskRecord();
                },
                showQuickJumper: true,
                showLessItems: true
            },
            taskRecordData:[],
            isLOadingTaskRecord: false,
             radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        console.log("电销记录_created_customerId:", this.customerId);
        this.pageTaskRecord();
    },
    activated(){
        console.log("电销记录_activated_customerId:", this.customerId);
        this.pageTaskRecord();
    },
    mounted(){
        if(!this.customerId){
            let initData = {
                orgDataSource:JSON.parse(JSON.stringify(this.conditionData)),
                dataSource:this.conditionData,
                reportCode:"callRecord"
            }
            this.$refs.myConditionBox.initCondition(initData);
        }
    },
    watch: {
        "customerId": function (n, o) {
            console.log("电销记录_客户ID改变:", n, o);
            const { taskRecordPostData } = this;
            taskRecordPostData.crmId = n;
            this.pageTaskRecord();
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        durationFormat: getDate.durationFormat,
           //播放/暂停
        audioTableControl(e,item){
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            let voiceTableAudio = this.$refs.voiceTableAudio;
            console.log("播放table音频",voiceTableAudio);
            if(voiceTableAudio){
                if(item){
                    voiceTableAudio.src = item.callAudioPath;
                    voiceTableAudio.play();// 播放
                    return;
                }else{
                     voiceTableAudio.pause();// 暂停
                }
            }
        },
        changeTaskRecordPageSize (e) {
            const value = e.target.value;
            Object.assign(this.taskRecordPostData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.taskRecordPagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageTaskRecord();
        },
       //分页查询 通话记录
        pageTaskRecord(){
            let { taskRecordPostData,customerId } = this;
            taskRecordPostData.crmId = customerId;
            pageTaskRecord(taskRecordPostData).then(response =>{
                   if (response.code === 200) {
                    this.isLoadingSearching = false;
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.taskRecordData = records;
                    this.taskRecordData.forEach(item => {
                        item.key = item.id;
                        if(item.callBackJson){
                            let callBack = JSON.parse(item.callBackJson);
                            delete callBack.callResult;
                            delete callBack.callResultState;
                            Object.assign(item,callBack);
                        }
                    });
                    let page = {
                        total: total,
                        pageSize: size,
                        current: current,
                    }
                    Object.assign(this.taskRecordPagination, page);
                }
            });
            
        },
        ConditionBoxCallBack(data){
            let size =  this.taskRecordPostData.page.size;
            if(data)
            this.taskRecordPostData = data;
            Object.assign(this.taskRecordPostData, {
                page:{
                    size,
                    current: 1,
                }
            });
            this.pageTaskRecord();
        },
         //条件改变
        onConditionChange(){
            Object.assign(this.taskRecordPostData.page,{current:1});
            this.pageTaskRecord();
        },
          //条件改变
        onTaskRecordConditionChange(localStorageKey,isStorage,$event){
            if(localStorageKey && isStorage){
                let value = $event.target.value;
                localStorage.setItem(localStorageKey,value);
            }
            Object.assign(this.taskRecordPostData.page,{current:1});
            this.pageTaskRecord();
        },
        resetTalkTimeCondition(){
            localStorage.setItem("taskRecordPostData_talkTimeStart",'');
            localStorage.setItem("taskRecordPostData_talkTimeEnd",'');
            Object.assign(this.taskRecordPostData,{
                    talkTimeStart: null,
                    talkTimeEnd: null
            });
            Object.assign(this.taskRecordPostData.page,{current:1});
            this.pageTaskRecord();
        }
       
    }
};
</script>
<style scoped>
    .big-main-wrapper{
        height: 50px !important;
    }
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 0px !important;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }

    
</style>